<ng-template #checkboxTemplate>
  <label nz-checkbox
         [class.ant-table-selection-select-all-custom]="nzShowRowSelection"
         [(ngModel)]="nzChecked"
         [nzDisabled]="nzDisabled"
         [nzIndeterminate]="nzIndeterminate"
         (ngModelChange)="nzCheckedChange.emit($event)">
  </label>
</ng-template>
<span class="ant-table-header-column">
  <div [class.ant-table-column-sorters]="nzShowSort" (click)="updateSortValue()">
    <span class="ant-table-column-title">
      <ng-container *ngIf="nzShowCheckbox && !nzShowRowSelection">
        <ng-template [ngTemplateOutlet]="checkboxTemplate"></ng-template>
      </ng-container>
      <div class="ant-table-selection" *ngIf="nzShowRowSelection">
        <ng-container *ngIf="nzShowCheckbox">
          <ng-template [ngTemplateOutlet]="checkboxTemplate"></ng-template>
        </ng-container>
        <div nz-dropdown class="ant-table-selection-down" nzPlacement="bottomLeft" [nzDropdownMenu]="selectionMenu">
          <i nz-icon nzType="down"></i>
        </div>
        <nz-dropdown-menu #selectionMenu="nzDropdownMenu">
          <ul nz-menu class="ant-table-selection-menu">
            <li nz-menu-item
                *ngFor="let selection of nzSelections"
                (click)="selection.onSelect()">{{selection.text}}</li>
          </ul>
        </nz-dropdown-menu>
      </div>
      <ng-content></ng-content>
    </span>
    <ng-content select="nz-dropdown"></ng-content>
    <div class="ant-table-column-sorter" *ngIf="nzShowSort">
      <div class="ant-table-column-sorter-inner ant-table-column-sorter-inner-full">
        <i nz-icon
           nzType="caret-up"
           class="ant-table-column-sorter-up"
           [class.on]="nzSort == 'ascend'"
           [class.off]="nzSort != 'ascend'"></i>
        <i nz-icon
           nzType="caret-down"
           class="ant-table-column-sorter-down"
           [class.on]="nzSort == 'descend'"
           [class.off]="nzSort != 'descend'"></i>
      </div>
    </div>
  </div>
</span>
<ng-content select="[nz-dropdown]"></ng-content>

<ng-container *ngIf="nzShowFilter">
  <i nz-icon
     nz-dropdown
     nzType="filter"
     nzTheme="fill"
     nzTrigger="click"
     nzTableFilter
     [nzClickHide]="false"
     [nzDropdownMenu]="filterMenu"
     [class.ant-table-filter-selected]="hasFilterValue"
     [class.ant-table-filter-open]="filterVisible"
     (nzVisibleChange)="dropDownVisibleChange($event)"></i>
  <nz-dropdown-menu #filterMenu="nzDropdownMenu">
    <ul nz-menu>
      <ng-container *ngIf="nzFilterMultiple">
        <li nz-menu-item *ngFor="let filter of multipleFilterList" (click)="checkMultiple(filter)">
          <label nz-checkbox [ngModel]="filter.checked" (ngModelChange)="checkMultiple(filter)"></label>
          <span>{{filter.text}}</span>
        </li>
      </ng-container>
      <ng-container *ngIf="!nzFilterMultiple">
        <li nz-menu-item *ngFor="let filter of singleFilterList" (click)="checkSingle(filter)">
          <label nz-radio [ngModel]="filter.checked" (ngModelChange)="checkSingle(filter)">{{filter.text}}</label>
        </li>
      </ng-container>
    </ul>
    <div class="ant-table-filter-dropdown-btns">
      <a class="ant-table-filter-dropdown-link confirm" (click)="hideDropDown()">
        <span>{{ locale.filterConfirm }}</span>
      </a>
      <a class="ant-table-filter-dropdown-link clear" (click)="reset();hideDropDown()">
        <span>{{ locale.filterReset }}</span>
      </a>
    </div>
  </nz-dropdown-menu>
</ng-container>
